<script lang="ts">
import { vElementSize } from '@vueuse/components';
import { useList } from '~comp-b/global-popups/invitation/hooks';
import { Skeleton } from '~/components/skeleton';

import { useHistoryList } from './hooks/index';
</script>

<script setup lang="ts">
const { list, logQuery } = useHistoryList();
const { symbol, currency } = useList();
const bp = useAppBreakpoints();
const targetH = ref(0);
const bodyH = computed(() => {
  if (targetH.value) {
    const count = bp.ltTabletl ? 6 : 8;
    return targetH.value * count;
  }
  return 30 * 10;
});
function onResize({ width, height }: { width: number; height: number }) {
  targetH.value = height + (bp.ltTabletl ? 6 : 8);
  return {
    width,
    height,
  };
}
</script>

<template>
  <div class="relative">
    <TCard class="history !shadow-none" headerClass="!mb-1">
      <template v-if="bp.tabletl" #header>
        <span class="text-sys-text-body">{{ $t('jP2s5dsw70Pu3j7uLqGbp') }}</span>
      </template>
      <TSuspenseView
        v-bind="buildSvPropsOfQuery(logQuery)"
        loadingClass="min-h-200"
        errorClass="min-h-200"
      >
        <swiper-container
          direction="vertical"
          :slidesPerView="$bp.ltTabletl ? 5 : 8"
          :spaceBetween="0"
          :loop="true"
          :autoplay="{ delay: 1500, reverseDirection: true }"
          :allowTouchMove="false"
          :draggable="false"
          :style="`height:${bodyH}px;`"
          :passiveListeners="true"
          :speed="1200"
          :touchReleaseOnEdges="true"
        >
          <swiper-slide v-for="(i, k) in list" :key="k">
            <div v-element-size="onResize" class="grid grid-cols-[1fr_auto_1fr] cursor-pointer py-2">
              <div class="flex-center justify-start break-normal text-sys-text-head lt-tabletl:text-sm">
                {{ i?.nickname }}
              </div>
              <div class="flex-start text-sys-text-body lt-tabletl:text-12px">
                {{ $t('rTm6wb5yV3y0PidVeHIdo') }}
              </div>
              <div class="flex-center justify-end">
                <span class="text-sm text-white">{{ symbol[currency] }}+</span>
                <TAmount
                  class="cursor-pointer text-red-500 lt-tabletl:text-sm"
                  :value="i?.amount"
                  symbol=""
                  iconType="text"
                  format="original"
                  colored="inherit"
                  :decimals="0"
                  iconPos="left"
                />
              </div>
            </div>
          </swiper-slide>
        </swiper-container>
        <template #pending>
          <Skeleton class="grid grid-cols-[1fr_0.5fr_1fr] w-full gap-3">
            <Skeleton
              v-for="i in 8"
              :key="i"
              type="rect"
              height="25px"
            />
          </Skeleton>
        </template>
      </TSuspenseView>
    </TCard>
  </div>
</template>

<style scoped lang="scss">
.history {
  &::after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;

    height: 200px;
    pointer-events: none;
    content: '';
  }
}
</style>
